<!DOCTYPE html>
<html>
<head>
	<title>CSS3实现页面的平滑过渡</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700">
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="container">
		<div class="st-container">
			<!-- nav begin -->
			<input type="radio" name="radio-set" checked="checked" id="st-control-1">
			<a href="#st-panel-1">Serendipity</a>
			<input type="radio" name="radio-set" id="st-control-2">
			<a href="#st-panel-2">Happiness</a>
			<input type="radio" name="radio-set" id="st-control-3">
			<a href="#st-panel-3">Tranquillity</a>
			<input type="radio" name="radio-set" id="st-control-4">
			<a href="#st-panel-4">Positivity</a>
			<input type="radio" name="radio-set" id="st-control-5">
			<a href="#st-panel-5">Passion</a>
			<!-- nav end -->

			<div class="st-scroll">
				<section class="st-panel" id="st-panel-1">
					<div class="st-desc" data-icon="A"></div>
					<h2>Serendipity</h2>
					<p>sbsbsbsbsbsbsbsbsbsbsbsb</p>
				</section>

				<section class="st-panel st-color" id="st-panel-2">
					<div class="st-desc" data-icon="B"></div>
					<h2>Happiness</h2>
					<p>sbsbsbsbsbsbsbsbsbsb</p>
				</section>

				<section class="st-panel" id="st-panel-3">
					<div class="st-desc" data-icon="C"></div>
					<h2>Tranquillity</h2>
					<p>sbsbsbsbsbsbsbsbsbsbsbsb</p>
				</section>

				<section class="st-panel st-color" id="st-panel-4">
					<div class="st-desc" data-icon="D"></div>
					<h2>Positivity</h2>
					<p>sbsbsbsbsbsbsbsbsbsb</p>
				</section>

				<section class="st-panel" id="st-panel-5">
					<div class="st-desc" data-icon="E"></div>
					<h2>Passion</h2>
					<p>you are stupid</p>
				</section>
			</div>
		</div>
	</div>
</body>
</html>